<template>
    <div>
        <!-- <div @click="back"><el-icon><DArrowRight /></el-icon>返回</div> -->
        <div style="text-align:center!important">  
            <iframe :src="'data:application/pdf;base64,' + pdfBase64" frameborder="0"></iframe>
        </div>
    </div>
</template>

<script setup>
import { getPdf } from '@/api/system/getPdf.js';
// pdf
import * as PDFJS from "pdfjs-dist/legacy/build/pdf";

import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js";
// 设置pdf.worker.js文件的引入地址
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;

const { proxy } = getCurrentInstance();
const numPages = ref(); // 总页数
const curPage = ref(1); // 当前页
const route = useRoute();
const router = useRouter();
const pdfBase64 = ref('');

function prev(){
    curPage.value--;
    getView();
}

function next(){
    curPage.value++;
    getView();
}

// function getView() {
//     proxy.$modal.loading();
//     getPdf(route.query.type).then(res => {
//         proxy.$modal.closeLoading();
//         // data是一个ArrayBuffer格式，也是一个buffer流的数据
//         PDFJS.getDocument(res).promise.then(pdfDoc => {
//             numPages.value = pdfDoc.numPages; // pdf的总页数
//             // 获取第1页的数据
//             pdfDoc.getPage(curPage.value).then(page => {
//                 // 设置canvas相关的属性
//                 const canvas = document.getElementById("the_canvas");
//                 const ctx = canvas.getContext("2d");
//                 const dpr = window.devicePixelRatio || 1;
//                 const bsr =
//                     ctx.webkitBackingStorePixelRatio ||
//                     ctx.mozBackingStorePixelRatio ||
//                     ctx.msBackingStorePixelRatio ||
//                     ctx.oBackingStorePixelRatio ||
//                     ctx.backingStorePixelRatio ||
//                     1;
//                 const ratio = dpr / bsr;
//                 const viewport = page.getViewport({ scale: 2 });
//                 canvas.width = viewport.width * ratio;
//                 canvas.height = viewport.height * ratio;
//                 canvas.style.width = viewport.width + "px";
//                 canvas.style.height = viewport.height + "px";
//                 ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
//                 const renderContext = {
//                     canvasContext: ctx,
//                     viewport: viewport,
//                 };
//                 // 数据渲染到canvas画布上
//                 page.render(renderContext);
//             })
//         })
//     })
// }

function getView() {
    proxy.$modal.loading();
    getPdf(route.query.type).then(res => {
        proxy.$modal.closeLoading();
        let blob = new Blob([res],{type: 'application/pdf;chartset=UTF-8'})
        let fileUrl = window.URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.href = fileUrl;
        a.click();
    })
}

getView();
</script>

<style scoped lang="scss">
.button {
    width: 100%;
    cursor: pointer;
}

.pdfView {
    width: 100%;
    // padding: 0px 100px 20px;
}

.btn {
    display: inline-block;
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #333;
}
</style>

